<template>
  <div id="plamform-day">
    <div class="table-content scroll-box">
      <tableSearch :searchCol="searchCol">
        <div slot="date">
          <Date-picker :editable='false'  slot="start_time" type="date" @on-change="changeStart"
                      size="small"></Date-picker>

        </div>

        <div slot="button">
          <div class="actionBox">
            <div>
              <Button size='small' type="primary" @click="postClient">{{ $t('views.public.search') }}</Button>
            </div>
            <div>
              <Button size='small' type="primary" @click="downloadForm">导出</Button>
            </div>
          </div>
        </div>
      </tableSearch>

      <Table id="myTable" :columns="titleList" :data="tablesList" border height="800">

<!--        <template slot-scope="{ row, index }" slot="action">-->
<!--          &lt;!&ndash; <Button type="primary" size="small" @click="showRank(row,2)">{{ $t("views.treasureHunt.table2Text15") }}-->
<!--          </Button>-->
<!--          <Button type="primary" size="small" @click="showRank(row,1)">{{ $t("views.treasureHunt.table2Text16") }}-->
<!--          </Button> &ndash;&gt;-->

<!--          <Button type="primary" size="small" @click="showRank(row, 1)">{{ $t("views.treasureHunt.showMore") }}-->
<!--          </Button>-->
<!--        </template>-->
        <!--        <template slot-scope="{ row, index }" slot="action2">-->
        <!--          <Button type="primary" size="small" @click="showRank2(row, 1)">{{ $t("views.treasureHunt.showMore") }}-->
        <!--          </Button>-->
        <!--        </template>-->
      </Table>


<!--      <div class="page">-->
<!--        <Page show-elevator :current="pn" :total="total" :page-size="page" @on-change="changePage"></Page>-->
<!--      </div>-->
    </div>
  </div>
</template>
<script>
import tableBox from '@/components/Table/VueTable.vue';
import tableSearch from '@/components/Table/TableSearch.vue';
import selectCountryArea from '@/components/selectCountryArea/selectCountryArea.vue';
import until from '@/js/until.js';
import { mapGetters } from 'vuex';

export default {
  data() {
    return {
      titleList: this.getTitleList(),
      searchCol: this.getSearchCol(),
      tablesList: [],
      pn: 1,
      page: 10,
      total: 0,
      countrySelect: 0,
      start_time:''
    };
  },
  components: {
    tableSearch,
    tableBox,
    selectCountryArea,
  },
  computed: {
    ...mapGetters([
      'getLocale',
    ]),
  },
  created() {
    // 获取当前日期
    var currentDate = new Date();






// 设置日期的格式
    var year = currentDate.getFullYear(); // 获取年份
    var month = ("0" + (currentDate.getMonth() + 1)).slice(-2); // 获取月份（注意月份是从0开始的，所以要加1）
    var day = ("0" + currentDate.getDate()).slice(-2); // 获取日期

// 组合成最终的日期格式
   this.start_time = year + "-" + month + "-" + day;
    this.getList();
  },
  methods: {
    downloadForm(){

      until.JSONToExcelConvertor( this.tablesList,this.start_time,this.titleList)
      // until.downloadForm(myTable,this.start_time)
    },
    getSearchCol() {
      return [
        {
          title: this.$i18n.tc('views.giftList.date'),
          key: 'date',
        },

      ];
    },
    getTitleList() {
      return [
        {
          title: this.$i18n.t('views.treasureHunt.table2Text1'),
          key: "ToDayTime",
          align: "center",
          width: 100,
          render: (h, data) => {
            const {row} = data;
            return h('div', row.ToDayTime);
          },
        },
        {
          title: '房间id',
          key: "RoomNumber",
          align: "center",
          width: 100,
          render: (h, data) => {
            const {row} = data;
            return h('div', row.RoomNumber);
          }
        },
        {
          title: '房主id',
          key: "Creator",
          align: "center",
          width: 100,
          render: (h, data) => {
            const {row} = data;
            return h('div', row.Creator);
          }
        },

        {
          title: '全天活跃数据',
          align: "center",
          itemKey: 'ToDayData',
          children: [
            {
              title: '通话时长',
              key: "ToDayData.totalTime",
              align: "center",
              itemKey: 1,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.ToDayData.totalTime);
              },
            },
            {
              title: '两个人以上开麦时长',
              key: "ToDayData.twoTotalTime",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.ToDayData.twoTotalTime);
              },
            },
            {
              title: '单开音乐时间',
              key: "ToDayData.musicTime",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.ToDayData.musicTime);
              },
            },
            {
              title: '送礼次数',
              key: "ToDayData.giftNumber",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.ToDayData.giftNumber);
              },
            },
            {
              title: '公屏对话次数',
              key: "ToDayData.messageNumber",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.ToDayData.messageNumber);
              },
            },
            {
              title: '游戏局数',
              key: "ToDayData.gameTotalNumber",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.ToDayData.gameTotalNumber);
              },
            },
            {
              title: '游戏时长',
              key: "ToDayData.gameTotalTime",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.ToDayData.gameTotalTime);
              },
            },
            {
              title: '游戏参与人数',
              key: "ToDayData.gameTotalMemberCount",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.ToDayData.gameTotalMemberCount);
              },
            },
            {
              title: '峰值在线',
              key: "ToDayData.maxOnline",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.ToDayData.maxOnline);
              },
            },
            {
              title: '新增房间关注人数',
              key: "ToDayData.favoriteNumber",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.ToDayData.favoriteNumber);
              },
            },
            {
              title: '进出房间人数',
              key: "ToDayData.joinNumber",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.ToDayData.joinNumber);
              },
            },

          ],
        },

        {
          title: '埃及时间15:00-18:00(UTC-0 13:00-16:00)',
          align: "center",
          itemKey: 'FirstData',
          children: [
            {
              title: '通话时长',
              key: "FirstData.totalTime",
              align: "center",
              itemKey: 1,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.FirstData.totalTime);
              },
            },
            {
              title: '两个人以上开麦时长',
              key: "FirstData.twoTotalTime",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.FirstData.twoTotalTime);
              },
            },
            {
              title: '单开音乐时间',
              key: "FirstData.musicTime",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.FirstData.musicTime);
              },
            },
            {
              title: '送礼次数',
              key: "FirstData.giftNumber",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.FirstData.giftNumber);
              },
            },
            {
              title: '公屏对话次数',
              key: "FirstData.messageNumber",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.FirstData.messageNumber);
              },
            },
            {
              title: '游戏局数',
              key: "FirstData.gameTotalNumber",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.FirstData.gameTotalNumber);
              },
            },
            {
              title: '游戏时长',
              key: "FirstData.gameTotalTime",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.FirstData.gameTotalTime);
              },
            },
            {
              title: '游戏参与人数',
              key: "FirstData.gameTotalMemberCount",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.FirstData.gameTotalMemberCount);
              },
            },
            {
              title: '峰值在线',
              key: "FirstData.maxOnline",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.FirstData.maxOnline);
              },
            },
            {
              title: '新增房间关注人数',
              key: "FirstData.favoriteNumber",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.FirstData.favoriteNumber);
              },
            },
            {
              title: '进出房间人数',
              key: "FirstData.joinNumber",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.FirstData.joinNumber);
              },
            },
          ],
        },

        {
          title: '埃及时间18:00-21:00(UTC-0 16:00-19:00)',
          align: "center",
          itemKey: 'SecondData',
          children: [
            {
              title: '通话时长',
              key: "SecondData.totalTime",
              align: "center",
              itemKey: 1,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.SecondData.totalTime);
              },
            },
            {
              title: '两个人以上开麦时长',
              key: "SecondData.twoTotalTime",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.SecondData.twoTotalTime);
              },
            },
            {
              title: '单开音乐时间',
              key: "SecondData.musicTime",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.SecondData.musicTime);
              },
            },
            {
              title: '送礼次数',
              key: "SecondData.giftNumber",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.SecondData.giftNumber);
              },
            },
            {
              title: '公屏对话次数',
              key: "SecondData.messageNumber",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.SecondData.messageNumber);
              },
            },
            {
              title: '游戏局数',
              key: "SecondData.gameTotalNumber",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.SecondData.gameTotalNumber);
              },
            },
            {
              title: '游戏时长',
              key: "SecondData.gameTotalTime",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.SecondData.gameTotalTime);
              },
            },
            {
              title: '游戏参与人数',
              key: "SecondData.gameTotalMemberCount",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.SecondData.gameTotalMemberCount);
              },
            },
            {
              title: '峰值在线',
              key: "SecondData.maxOnline",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.SecondData.maxOnline);
              },
            },
            {
              title: '新增房间关注人数',
              key: "SecondData.favoriteNumber",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.SecondData.favoriteNumber);
              },
            },
            {
              title: '进出房间人数',
              key: "SecondData.joinNumber",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.SecondData.joinNumber);
              },
            },

          ],
        },

        {
          title: '埃及时间21:00-24:00(UTC-0 19:00-22:00)',
          align: "center",
          itemKey: 'LastData',
          children: [
            {
              title: '通话时长',
              key: "LastData.totalTime",
              align: "center",
              itemKey: 1,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.LastData.totalTime);
              },
            },
            {
              title: '两个人以上开麦时长',
              key: "LastData.twoTotalTime",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.LastData.twoTotalTime);
              },
            },
            {
              title: '单开音乐时间',
              key: "LastData.musicTime",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.LastData.musicTime);
              },
            },
            {
              title: '送礼次数',
              key: "LastData.giftNumber",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.LastData.giftNumber);
              },
            },
            {
              title: '公屏对话次数',
              key: "LastData.messageNumber",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.LastData.messageNumber);
              },
            },
            {
              title: '游戏局数',
              key: "LastData.gameTotalNumber",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.LastData.gameTotalNumber);
              },
            },
            {
              title: '游戏时长',
              key: "LastData.gameTotalTime",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.LastData.gameTotalTime);
              },
            },
            {
              title: '游戏参与人数',
              key: "LastData.gameTotalMemberCount",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.LastData.gameTotalMemberCount);
              },
            },
            {
              title: '峰值在线',
              key: "LastData.maxOnline",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.LastData.maxOnline);
              },
            },
            {
              title: '新增房间关注人数',
              key: "LastData.favoriteNumber",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.LastData.favoriteNumber);
              },
            },
            {
              title: '进出房间人数',
              key: "LastData.joinNumber",
              align: "center",
              itemKey: 2,
              width: 150,
              render: (h, data) => {
                const {row} = data;
                return h('div', row.LastData.joinNumber);
              },
            },
          ],
        },




      ];
    },

    changeStart(data) {
      this.start_time = data
    },
    changeEnd(data) {
      this.end_time = data
    },
    postClient() {
      this.pn = 1;
      // if(!((this.start_time && this.end_time) || (!this.start_time && !this.end_time))) {
      //   this.$Message.error(this.$i18n.t('views.giftList.enterStartAndEnd'));
      //   return;
      // }
      const startTime = this.getTimestamp(this.start_time);
      const endTime = this.getTimestamp(this.end_time, 'end');
      if (startTime && endTime && startTime > endTime) {
        this.$Message.error(this.$i18n.t('views.giftList.startEndTime'));
        return;
      }
      this.getList();
    },
    areaChange(data) {
      this.countrySelect = data.value;
    },
    timestampTime(data, hms) {
      return until.timestampTime(data, hms);
    },
    getList(scrollTopFlag) {
      return this.$http.dataList({

        today_time: this.start_time,

      }, {
        method: this.getList,
        that: this,
        scrollTopFlag,
      }).then(res => {
        this.tablesList = res.userData;

      })
    },
    getTimestamp(time, type) {
      if(typeof time === 'object') return parseInt(time.getTime());
      else return parseInt(until.dataToTimestamp(time, type) / 1000);
    },
    changePage(pn) {
      this.pn = pn;
      this.getList(pn, true);
    },
    showDetail(item) {
      let routeUrl = this.$router.resolve({
          path: "/statistics-platform/giftDetail",
          query: {
            gift_id: item.id,
          },
      });
      window.open(routeUrl .href, '_blank');
    },
  },
  watch: {
    getLocale: function() {
      this.searchCol = this.getSearchCol();
      this.titleList = this.getTitleList();
    },
  },
}
</script>
<style lang="scss" scoped>
  #plamform-day {
    .recharge-detail {
      white-space: nowrap;
    }
    .search-title {
      color: red;
      display: inline-block;
    }
  }
</style>
